<template>
  <view class="page-container">
    <!-- 1. 赛事报名模块 -->
    <view class="registration-container">
      <view class="sec-header">
        <text class="sec-title">REGISTRATION</text>
        <text class="title-cn">赛事报名</text>
      </view>
      <!-- 报名卡片循环 -->
      <view class="registration-card" v-for="(item, index) in registrations" :key="item.id">
        <!-- 左侧文字 -->
        <view class="left-text">{{ item.title }}</view>
        <!-- 右侧状态按钮 -->
        <view class="right-status" :style="{ backgroundColor: item.statusColor }">
          {{ item.statusText }}
        </view>
      </view>
    </view>

    <!-- 分割线 -->
    <view class="divider"></view>

    <!-- 2. 赛事列表模块 -->
    <view class="event-list-container">
      <view class="sec-header">
        <text class="sec-title">EVENT LIST</text>
        <text class="title-cn">赛事列表</text>
      </view>

      <!-- 年份切换栏 -->
      <view class="year-tab-container">
        <view class="year-tab" v-for="(year, idx) in years" :key="idx" :class="{ active: year === activeYear }"
          @click="switchYear(year)">
          {{ year }}
        </view>
        <text class="arrow-icon">→</text>
      </view>

      <!-- 赛事卡片列表 -->
      <view class="event-card" v-for="(event, idx) in filteredEvents" :key="idx">
        <!-- 卡片顶部: 日期 & 地点标签 -->
        <view class="event-card-top">
          <view class="event-date">{{ event.date }}</view>
          <view class="event-location">
            <u-icon name="location" size="16" color="#666" v-if="false" />
            <!-- 用文字模拟位置图标 -->
            <text class="location-icon">📍</text>
            <text class="location-text">{{ event.club }}</text>
          </view>
        </view>

        <!-- 卡片主体: 左侧赛事logo or 图片 + 右侧信息 -->
        <view class="event-card-body">
          <image class="event-cover" :src="event.cover" mode="aspectFill" />
          <view class="event-info">
            <text class="event-title">{{ event.name }}</text>
            <text class="event-desc">{{ event.desc }}</text>
            <text class="event-range">{{ event.range }}</text>
          </view>
          <!-- 赛事状态按钮 -->
          <view class="event-status" :style="{ backgroundColor: event.statusColor }">
            {{ event.statusText }}
          </view>
        </view>
      </view>
    </view>
    <!-- 赛事公告模块 -->
    <view class="sec-header">
      <text class="sec-title">EVENT LIST</text>
      <text class="title-cn">赛事公告</text>
    </view>

    <!-- Swiper 轮播示例 -->
    <swiper class="notice-swiper" autoplay="true" interval="4000" circular="true" :indicator-dots="false">
      <swiper-item v-for="(notice, idx) in noticeList" :key="idx" class="notice-item">
        <image class="notice-image" :src="notice.cover" mode="aspectFill" />
        <!-- 文字叠加层(标题, 俱乐部) -->
        <view class="notice-overlay">
          <view class="notice-title">{{ notice.title }}</view>
          <view class="notice-subtitle">{{ notice.club }}</view>
        </view>
        <!-- 底部公告内容 -->
        <view class="notice-footer">
          <text class="notice-tag">【公告】</text> {{ notice.announcement }}
          <view class="notice-range">{{ notice.range }}</view>
        </view>
      </swiper-item>
    </swiper>
    <!-- 自定义圆点指示器 -->
    <view class="notice-dots">
      <view class="notice-dot" v-for="(item, dotIndex) in noticeList" :key="'dot-' + dotIndex"
        :class="{ active: dotIndex === activeNotice }"></view>
    </view>

    <!-- 赛事规程模块 -->
    <view class="sec-header">
      <text class="sec-title">EVENT LIST</text>
      <text class="title-cn">赛事规程</text>
    </view>

    <!-- 列表示例 -->
    <view class="rules-list">
      <view class="rules-card" v-for="(rule, ruleIndex) in ruleList" :key="ruleIndex">
        <view class="rules-info">
          <text class="rules-title">{{ rule.title }}</text>
          <text class="rules-subtitle">{{ rule.club }}</text>
        </view>
        <view class="rules-btn">赛事规程</view>
      </view>
    </view>
    <!-- 赛事分组模块 -->
    <view class="event-group-container">
      <!-- 标题区，复用 sec-header 等 -->
      <view class="sec-header">
        <text class="sec-title">EVENT LIST</text>
        <text class="title-cn">赛事分组</text>
      </view>

      <!-- 分组内容：左侧按钮列表 + 右侧展示区 -->
      <view class="group-content">
        <!-- 左侧分组按钮 -->
        <view class="group-left">
          <view class="group-btn" v-for="(group, index) in groupList" :key="index"
            :class="{ active: activeGroupIndex === index }" @click="switchGroup(index)">
            <text class="group-btn-text">{{ group.title }}</text>
            <text class="group-arrow">></text>
          </view>
        </view>

        <!-- 右侧分组对应内容 -->
        <view class="group-right">
          <view class="group-item" v-for="(item, idx) in filteredItems" :key="idx">
            <text class="right-title">{{ item.club }}</text>
            <text class="right-date">{{ item.dateRange }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 赛事成绩直播模块 -->
    <view class="live-scoring-container">
      <!-- 标题 -->
      <view class="sec-header">
        <text class="sec-title">EVENT LIST</text>
        <text class="title-cn">赛事成绩直播</text>
      </view>
      <view class="content-class">

        <!-- 比赛卡片 -->
        <view class="live-score-card">
          <!-- 比赛进行中标识 -->
          <view class="live-badge">比赛进行中</view>
          <!-- 比赛名称 & 日期信息 -->
          <view class="live-info">
            <text class="live-event-title">{{ liveEvent.title }}</text>
            <text class="live-event-date">Date: {{ liveEvent.date }}</text>
          </view>
        </view>

        <!-- Tab 切换 -->
        <view class="live-tab-container">
          <view class="live-tab" v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }"
            @click="switchTab(index)">
            {{ tab }}
          </view>
        </view>

        <!-- 成绩表格 -->
        <view class="live-table">
          <!-- 表头 -->
          <view class="table-header">
            <text class="header-item">POS</text>
            <text class="header-item">Players</text>
            <text class="header-item">Tod</text>
            <text class="header-item">Thru</text>
            <text class="header-item">Tot</text>
          </view>
          <!-- 表体 -->
          <view class="table-row" v-for="(match, index) in filteredMatches" :key="index">
            <text class="row-item pos">{{ match.pos }}</text>
            <view class="row-item player-cell">
              <image class="player-avatar" :src="match.avatar" mode="aspectFill" />
              <text class="player-name">{{ match.name }}</text>
            </view>
            <text class="row-item">{{ match.tod }}</text>
            <text class="row-item">{{ match.thru }}</text>
            <text class="row-item tot" :class="{ negative: match.tot < 0 }">
              {{ match.tot }}
            </text>
          </view>
        </view>

        <!-- 查看更多 -->
        <view class="see-more" @click="goToMoreMatches">点击查看更多</view>
      </view>

    </view>

    <!-- 赛事成绩统计模块 -->
    <view class="score-stat-container">
      <!-- 标题，与之前相同的样式 -->
      <view class="sec-header">
        <text class="sec-title">EVENT LIST</text>
        <text class="title-cn">赛事成绩统计</text>
      </view>

      <!-- 分组切换(四个圆形按钮) -->
      <view class="score-group-switch">
        <view class="switch-item" v-for="(group, idx) in scoreGroups" :key="idx"
          :class="{ active: activeScoreGroupIndex === idx }" @click="switchScoreGroup(idx)">
          <!-- 分两行显示，例如 A组 (上)  男子 (下) -->
          <text class="group-top">{{ group.groupName }}</text>
          <text class="group-bottom">{{ group.gender }}</text>
        </view>
      </view>

      <!-- 红色表头 -->
      <view class="score-table-header">
        <text class="header-col">排名</text>
        <text class="header-col">球员-{{ currentGroupLabel }}</text>
        <text class="header-col">参赛次数</text>
        <text class="header-col">积分</text>
      </view>

      <!-- 渐变色背景的成绩列表 -->
      <view class="score-table-body">
        <view class="score-row" v-for="(item, index) in filteredScoreList" :key="index">
          <!-- 排名 & 圆形 -->
          <view class="rank-badge">
            <text>{{ item.rank }}</text>
          </view>
          <!-- 球员头像 & 名称 -->
          <view class="player-cell">
            <image class="player-avatar" :src="item.avatar" mode="aspectFill" />
            <text class="player-name">{{ item.name }}</text>
          </view>
          <!-- 参赛次数 -->
          <text class="player-times">{{ item.times }}</text>
          <!-- 积分 -->
          <text class="player-points">{{ item.points }}</text>
        </view>
      </view>
    </view>
    <!-- 赛事信息模块 -->
    <view class="event-info-container">
      <!-- 标题：复用 sec-header -->
      <view class="sec-header">
        <text class="sec-title">EVENT LIST</text>
        <text class="title-cn">赛事信息</text>
      </view>

      <view class="event-info-list">
        <view class="info-item" v-for="(info, index) in eventInfos" :key="index"
          :class="index % 2 === 1 ? 'odd-bg' : ''" @click="goEventDetail(info)">
          <text class="info-text">{{ info.title }}</text>
          <view class="info-arrow">></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "EventRegistration",
  data() {
    return {
      /* ========== 1. 赛事报名示例数据 ========== */
      registrations: [
        {
          id: 1,
          title: "公开赛报名",
          statusText: "未开始",
          statusColor: "#999999",
        },
        {
          id: 2,
          title: "冠军赛报名",
          statusText: "报名",
          statusColor: "#c51d1d",
        },
      ],

      /* ========== 2. 赛事列表示例数据 ========== */
      years: [2024, 2023, 2022, 2021],
      activeYear: 2024, // 当前选中的年份

      allEvents: [
        {
          date: "2024-06-07",
          club: "成都市麓山国际高尔夫球俱乐部",
          cover: "/static/images/avatar.jpg", // 占位图片
          name: "长江邀请赛",
          desc: "成都市麓山国际高尔夫球会",
          range: "2020/06/07-2020/06/08",
          statusText: "比赛报名中",
          statusColor: "#c51d1d",
          year: 2024,
        },
        {
          date: "2024-05-20",
          club: "上海滨江高尔夫球俱乐部",
          cover: "/static/images/avatar.jpg",
          name: "上海夏季巡回赛",
          desc: "汇聚各路精英球手",
          range: "2020/05/20-2020/05/22",
          statusText: "报名已截止",
          statusColor: "#999999",
          year: 2024,
        },
        {
          date: "2023-07-11",
          club: "北京雁栖湖高尔夫",
          cover: "/static/images/avatar.jpg",
          name: "年度明星赛",
          desc: "邀请各省市球星",
          range: "2020/07/11-2020/07/13",
          statusText: "比赛结束",
          statusColor: "#999999",
          year: 2023,
        },
        // ...可自行新增更多
      ],
      /* 赛事公告示例数据 */
      noticeList: [
        {
          cover: "/static/images/avatar.jpg", // 占位大图
          title: "长江邀请赛",
          club: "成都市麓山国际高尔夫球会",
          announcement: "成都市麓山国际高尔夫球挑战赛-报名公告",
          range: "2020/06/07-2020/06/08",
        },
        {
          cover: "/static/images/avatar.jpg",
          title: "夏季巡回赛",
          club: "上海滨江高尔夫球俱乐部",
          announcement: "上海滨江夏季赛-报名公告",
          range: "2020/05/20-2020/05/22",
        },
        {
          cover: "/static/images/avatar.jpg",
          title: "年度明星赛",
          club: "北京雁栖湖高尔夫球场",
          announcement: "各省市球星大集合-公告",
          range: "2020/07/11-2020/07/13",
        },
        // ...可继续添加
      ],
      activeNotice: 0, // 当前显示第几张公告

      /* 赛事规程示例数据 */
      ruleList: [
        {
          title: "长江邀请赛",
          club: "成都市麓山国际高尔夫球会",
        },
        {
          title: "长江邀请赛",
          club: "成都市麓山国际高尔夫球会",
        },
        // ...可继续添加
      ],
      groupList: [
        { title: "冠军赛" },
        { title: "邀请赛" },
        // 可以继续添加更多分组
      ],
      activeGroupIndex: 0,

      // 所有赛事条目，每个条目包含其归属分组
      groupItems: [
        {
          group: "冠军赛",
          club: "成都市麓山国际高尔夫球会",
          dateRange: "2020/06/07-2020/06/08",
        },
        {
          group: "邀请赛",
          club: "成都市麓山国际高尔夫球会",
          dateRange: "2020/06/07-2020/06/08",
        },
        {
          group: "冠军赛",
          club: "成都市麓山国际高尔夫球会",
          dateRange: "2020/06/07-2020/06/08",
        },
        {
          group: "邀请赛",
          club: "成都市麓山国际高尔夫球会",
          dateRange: "2020/06/07-2020/06/08",
        },
        // ...可继续添加
      ],
      liveEvent: {
        title: "长江商学院长江杯理事会队长秘书长联谊赛",
        date: "05/06-07/06", // 演示用
      },
      tabs: ["总杆", "净杆", "团队"],
      activeTab: 0,
      // 比赛选手成绩演示数据
      ongoingMatches: [
        {
          pos: 1,
          avatar: "/static/images/avatar.jpg", // 占位头像
          name: "Gene Ortiz",
          tod: -6,
          thru: "F",
          tot: -19,
          type: "总杆",
        },
        {
          pos: 2,
          avatar: "/static/images/avatar.jpg",
          name: "Gene Ortiz",
          tod: -5,
          thru: "F",
          tot: -18,
          type: "净杆",
        },
        {
          pos: 3,
          avatar: "/static/images/avatar.jpg",
          name: "Gene Ortiz",
          tod: -4,
          thru: "F",
          tot: -17,
          type: "团队",
        },
        {
          pos: 4,
          avatar: "/static/images/avatar.jpg",
          name: "Gene Ortiz",
          tod: -6,
          thru: "F",
          tot: -19,
          type: "总杆",
        },
        {
          pos: 5,
          avatar: "/static/images/avatar.jpg",
          name: "Gene Ortiz",
          tod: -6,
          thru: "F",
          tot: -19,
          type: "总杆",
        },
        {
          pos: 6,
          avatar: "/static/images/avatar.jpg",
          name: "Gene Ortiz",
          tod: -6,
          thru: "F",
          tot: -19,
          type: "总杆",
        },
      ],
      // 1) 分组切换
      scoreGroups: [
        { groupName: "A组", gender: "男子" },
        { groupName: "A组", gender: "女子" },
        { groupName: "B组", gender: "男子" },
        { groupName: "B组", gender: "女子" },
      ],
      activeScoreGroupIndex: 0,

      // 2) 所有选手成绩 - 示例数据
      allScoreList: [
        {
          group: "A组男子",
          rank: 1,
          avatar: "/static/images/avatar.jpg",
          name: "Gene Ortiz",
          times: 9,
          points: 415.0,
        },
        {
          group: "A组男子",
          rank: 2,
          avatar: "/static/images/avatar.jpg",
          name: "Gene Ortiz",
          times: 9,
          points: 415.0,
        },
        {
          group: "A组男子",
          rank: 3,
          avatar: "/static/images/avatar.jpg",
          name: "Gene Ortiz",
          times: 9,
          points: 415.0,
        },
        {
          group: "A组女子",
          rank: 1,
          avatar: "/static/images/avatar.jpg",
          name: "Player A",
          times: 8,
          points: 400.0,
        },
        {
          group: "B组男子",
          rank: 1,
          avatar: "/static/images/avatar.jpg",
          name: "Player B",
          times: 10,
          points: 420.0,
        },
        // ...再添加更多
      ],
      // 赛事信息列表(示例)
      eventInfos: [
        { title: "长江邀请赛成都麓山国际高尔夫球会" },
        { title: "长江邀请赛成都麓山国际高尔夫球会" },
        { title: "长江邀请赛成都麓山国际高尔夫球会" },
        { title: "长江邀请赛成都麓山国际高尔夫球会" },
        { title: "长江邀请赛成都麓山国际高尔夫球会" },
      ],
    };
  },
  computed: {
    // 根据 activeYear 来过滤显示对应年份的赛事
    filteredEvents() {
      return this.allEvents.filter(event => event.year === this.activeYear);
    },
    filteredItems() {
      const currentGroup = this.groupList[this.activeGroupIndex]?.title;
      return this.groupItems.filter((item) => item.group === currentGroup);
    },
    filteredMatches() {
      // 根据当前tab返回对应type的数据
      const tabMap = ["总杆", "净杆", "团队"];
      return this.ongoingMatches.filter(
        (match) => match.type === tabMap[this.activeTab]
      );
    },
    // 返回当前选中分组的Label, 形如 "A组男子" / "A组女子" / "B组男子" / "B组女子"
    currentGroupLabel() {
      const g = this.scoreGroups[this.activeScoreGroupIndex]
      return `${g.groupName}${g.gender}`
    },
    // 过滤出当前分组下的成绩列表
    filteredScoreList() {
      return this.allScoreList.filter(
        (item) => item.group === this.currentGroupLabel
      )
    },
  },
  methods: {
    switchYear(year) {
      this.activeYear = year;
    },
    handleSwiperChange(e) {
      this.activeNotice = e.detail.current
    }, switchGroup(index) {
      this.activeGroupIndex = index;
    },
    switchTab(index) {
      this.activeTab = index;
    },
    goToMoreMatches() {
      // 查看更多
      wx.showToast({
        title: "点击查看更多",
        icon: "none",
      });
      // 或执行页面跳转
      // wx.navigateTo({ url: "/pages/moreMatches/index" });
    },
    switchScoreGroup(idx) {
      this.activeScoreGroupIndex = idx
    },

    // 点击某个赛事信息的回调
    goEventDetail(item) {
      // 这里可以执行页面跳转或弹窗逻辑
      // 演示: 弹窗提示
      wx.showToast({
        title: `点击了: ${item.title}`,
        icon: "none",
      });

      // 或跳转, 如:
      // wx.navigateTo({ url: "/pages/eventDetail/index?id=" + item.id });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>